<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Bug OCR - Demo</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">
    
    function Position(xtl, ytl, xbr, ybr, occluded, outside)
    {
      this.xtl = xtl;
      this.ytl = ytl;
      this.xbr = xbr;
      this.ybr = ybr;
      this.occluded = occluded ? occluded : false;
      this.outside = outside ? outside : false;
      this.width = xbr - xtl;
      this.height = ybr - ytl;
  
      if (this.xbr <= this.xtl)
      {this.xbr = this.xtl + 1;}
  
      if (this.ybr <= this.ytl)
      {this.ybr = this.ytl + 1;}
    }
    
    function BoxDrawer(container)
    {
	var me = this;
	this.onstartdraw = [];
	this.onstopdraw = []
	this.enabled = false;
	this.drawing = false;
	this.startx = 0;
	this.starty = 0;
	this.container = container;
	this.handle = null;
	this.color = null;
	this.vcrosshair = null;
	this.hcrosshair = null;
	this.counter = 0;
	
	this.collections = [];
    
	this.draw = function()
	{
	  // for everything in the collections draw the bounding box
	};
    
	/*
	 * Enables the drawer.
	 */
	this.enable = function()
	{
	    this.enabled = true;
    
	    this.hcrosshair = $('<div class="crosshair"></div>').appendTo(this.container);
	    this.vcrosshair = $('<div class="crosshair"></div>').appendTo(this.container);
    
	    this.vcrosshair.css({
		width: '2px',
		height: '100%',
		position: 'relative',
		top: '0px',
		left: '0px',
		backgroundColor: this.color,
		zIndex: 1
	    }).hide();
    
	    this.hcrosshair.css({
		height: '2px',
		width: '100%',
		position: 'relative',
		top: '0px',
		left: '0px',
		backgroundColor: this.color,
		zIndex: 1
	    }).hide();
	}
    
	/*
	 * Disables the drawer. No boxes can be drawn and interface cues are
	 * disabled.
	 */
	this.disable = function()
	{
	    this.enabled = false;
	    this.container.css({'cursor': 'default'});
		      this.vcrosshair.remove(); this.hcrosshair.remove();
	}
    
	/*
	 * Method called when we receive a click on the target area.
	 */
	this.click = function(xc, yc)
	{
	    if (this.enabled)
	    {
		if (!this.drawing)
		{this.startdrawing(xc, yc);}
		else
		{this.finishdrawing(xc, yc);}
	    }
	}
    
	/*
	 * Updates the current visualization of the current box.
	 */
	this.updatedrawing = function(xc, yc)
	{
	    if (this.drawing)
	    {
		var pos = this.calculateposition(xc, yc);
		var offset = this.container.offset();
		this.handle.css({
		    "top": pos.ytl + offset.top + "px",
		    "left": pos.xtl + offset.left + "px",
		    "width": (pos.width - 3) + "px",
		    "height": (pos.height - 3)+ "px",
		    "border-color": this.color
		});
	    }
	}
    
	/*
	 * Updates the cross hairs.
	 */
	this.updatecrosshairs = function(visible, xc, yc)
	{
	    if (this.enabled)
	    {
		if (visible && !this.drawing)
		{
		    this.vcrosshair.show().css('left', xc + 'px');
		    this.hcrosshair.show().css('top', yc + 'px');
		}
		else
		{
		    this.vcrosshair.hide();
		    this.hcrosshair.hide();
		}
	    }
	}
    
	this.calculateposition = function(xc, yc)
	{
	    var xtl = Math.min(xc, this.startx); var ytl = Math.min(yc, this.starty);
	    var xbr = Math.max(xc, this.startx); var ybr = Math.max(yc, this.starty);
	    return new Position(xtl, ytl, xbr, ybr)
	}
    
	this.startdrawing = function(xc, yc)
	{
	    if (!this.drawing)
	    {
		console.log("Starting new drawing");

		this.startx = xc; this.starty = yc;
		this.drawing = true;
		
		$(".boundingbox").hide();
    
		this.handle = $('<div class="boundingbox"><div>');
		this.updatedrawing(xc, yc);
		this.container.append(this.handle);
    
		for (var i in this.onstartdraw)
		{
		    this.onstartdraw[i]();
		}
	    }
	}
    
	/*
	 * Completes drawing the box. This will remove the visualization, so you will 
	 * have to redraw it.
	 */
	this.finishdrawing = function(xc, yc)
	{
	    if (this.drawing)
	    {
		console.log("Finishing drawing");
    
		var position = this.calculateposition(xc, yc);
    
		// call callbacks
		for (var i in this.onstopdraw)
		{
		    this.onstopdraw[i](position);
		}
    
		this.drawing = false;
		
		box = this.handle.clone();
		
		// Use this counter to keep track for deletion and others
		box.attr('counter',this.counter);
		
		f = this.updatetextarea;
		
		var cc = this.counter;
		box.resizable({autoHide:true, stop : function(event,ui) { f();}});
		box.draggable({stop : function(event,ui) { f()}});
		
		$fill = $("<div class='fill'></div>");
		$fill.css({"background-color" : this.color});
		box.append($fill);
		box.click(function(){
		  $("#info").find(".done_button").attr("counter",cc);
		  $("#info").find(".delete_button").attr("counter",cc);
		  $("#info").show();
		  $("#info").find("textarea").val($(this).find(".text_region").html());
		});
		box.hover(function(){$(this).find(".fill").show()},function(){$(this).find(".fill").hide()});
		
		this.handle.remove();
		
		this.container.append(box);		
				    
		this.startx = 0;
		this.starty = 0;
		this.disable();
		
		// Fill in the info
		$("#info").find(".done_button").attr("counter",this.counter);
		$("#info").find(".delete_button").attr("counter",this.counter);
		$("#info").find("textarea").val("");
		$("#info").show();
		
		$('.boundingbox').show();
		this.updatetextarea();
		this.counter++;
	    }
	}
	
	this.updatetextarea = function() {
	  bbs = $(".boundingbox");
	  totaltext = "";
	  for(i=0;i<bbs.length;i++){
	    bb = bbs[i];
	    counter = $(bb).attr("counter");
	    text = $(bb).find(".text_region").html();
	    texttype = $(bb).find(".text_type_region").html();
	    totaltext += bb.offsetLeft + " " + bb.offsetTop + " " + parseInt(bb.style.width) + " " + parseInt(bb.style.height) + ' ' + texttype + ' "' + text + '"\n';
	  }
	  $("#resulttextarea").val(totaltext)
	}
	
	this.canceldrawing = function()
	{
	    if (this.drawing)
	    {
		console.log("Cancelling drawing");
		this.drawing = false;
		this.handle.remove();
		this.startx = 0;
		this.starty = 0;
	    }
	}
    
	var respondtoclick = function(e) {
	    var offset = container.offset();
	    me.click(e.pageX - offset.left, e.pageY - offset.top);
	};
    
	var ignoremouseup = false;
	container.mousedown(function(e) {
	    ignoremouseup = true;
	    window.setTimeout(function() { ignoremouseup = false; }, 500);
	    respondtoclick(e);
	});
    
	container.mouseup(function(e) {
	    if (!ignoremouseup)
	    {
		respondtoclick(e);
	    }
	});
    
	container.click(function(e) {
	    e.stopPropagation();
	});
    
	container.mousemove(function(e) {
	    var offset = container.offset();
	    var xc = e.pageX - offset.left;
	    var yc = e.pageY - offset.top;
    
	    me.updatedrawing(xc, yc);
	    me.updatecrosshairs(true, xc, yc);
	});
    
	$("body").click(function(e) {
	    me.canceldrawing();
	});
    }

	jQuery(function($){
		
		// button
		$( "#button_new_annotation" ).button({
            		icons: {
                		primary: "ui-icon-plus"
            		}
        	});

		target = $('#target');
		drawer = new BoxDrawer(target);

		drawer.color = '#FF00FF';
		$("#button_new_annotation").click(function(){
			$(this).button("option", "disabled", "true");
			drawer.enable();
		});
		
		done_button_handler = function(){
		  $outer_container = $(this).parent().parent();
		  
		  counter = $(this).attr("counter");
		  $bb = $(".boundingbox[counter=" + counter + "]");
		  
		  if($bb.find(".text_region").length != 0){
		    $bb.find(".text_region").html($(this).parent().find("textarea").val());
		    $bb.find(".text_type_region").html($outer_container.find('input:checked').val());
		  } else {
		    $text_region = $("<div class='text_region'></div>");
		    $text_region.html($(this).parent().find("textarea").val());
		    $text_type_region = $("<div class='text_type_region'></div>");
		    $text_type_region.html($outer_container.find('input:checked').val());
		    $bb.append($text_region);
		    $bb.append($text_type_region);
		    drawer.updatetextarea();
		  }
		  $("#button_new_annotation").button("option","disabled",false);
		  $("#info").hide();
		};
		
		$(".done_button").click(done_button_handler);
		
		$(".delete_button").click(function(){
		  currentcounter = $(this).attr('counter');
		  $('.boundingbox[counter=' + currentcounter + ']').remove();
		  $("#info").hide();
		  $("#button_new_annotation").button("option","disabled",false);
		  drawer.updatetextarea();
		});
    	});

    </script>
  </head>

  <body>
    <div id="wrapper">
    	<div id="header">
    		Instructions go here.
    	</div>
    	<div id="content">
    		<div id="target" >
		  <img class="target_image" src="images/focused1.jpg"/>
		</div>
    	</div>
    	<div id="sidebar">
    		<button id="button_new_annotation">New annotations</button><br/>
		<div id="info">
		    <div class="content">
		  <div class="radioset">
		    <input type="radio" name="radio" value="machine" checked="yes"/> Machine-printed
		    <input type="radio" name="radio" value="handwriting"/> Handwriting
		  </div>
		  <div>
		  Text: <br/>
		  <textarea></textarea> 
		  </div>
		  <button class="delete_button">Delete</button>
		  <button class="done_button">Done</button>
	    </div>
		</div>
		<textarea id="resulttextarea">
		</textarea>
    	</div>
	<div id="footer"></div>
    </div>
	
    <div id="original_template" class="template">
    </div>
  </body>
</html>

